<div class="mainPage">

    <div style="margin:0 1%">
        <div class="gutter-example">
            <div nz-row [nzGutter]="8">
                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 380px;">
                        <ng-template #title>
                            本辖区应急救援次数及分布情况
                        </ng-template>
                        <ng-template #body>
                                <h3>辖区应急救援总次数：{{rescueNum}}</h3>
                                <div echarts *ngIf="option1.title" [options]="option1"></div>
                            
                        </ng-template>
                    </nz-card>
                </div>
                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 380px;">
                        <ng-template #title>
                                本辖区各类型应急救援占比
                        </ng-template>
                        
                        <ng-template #body>
                            <div echarts *ngIf="option8.title" [options]="option8"></div>
                            
                        </ng-template>
                    </nz-card>
                </div>
            </div>
        </div>
    </div>

    <div style="margin:1%">
        <div class="gutter-example">
            <div nz-row [nzGutter]="8">
                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 520px;">
                        <ng-template #title>
                            本辖区维保准时率
                        </ng-template>
                        <ng-template #body>
                                <!-- <h3>整体体准时率：{{maintInRio}}</h3> -->
                                <div echarts *ngIf="option4.title" [options]="option4"></div>
                            
                        </ng-template>
                    </nz-card>
                </div>
                <div nz-col class="gutter-row" [nzSpan]="12">
                    <nz-card style="width:100%;max-height: 520px;">
                        <ng-template #title>
                                本辖区各类型维保平均耗时
                        </ng-template>
                        
                        <ng-template #body>
                            <div echarts *ngIf="option5.color" [options]="option5"></div>
                            
                        </ng-template>
                    </nz-card>
                </div>
            </div>
        </div>
    </div>

    <div style="margin:1%">
            <div class="gutter-example">
                <div nz-row [nzGutter]="8">
                    <div nz-col class="gutter-row" [nzSpan]="12">
                        <nz-card style="width:100%;max-height: 380px;">
                            <ng-template #title>
                                本辖区乘客投诉率及分布情况
                            </ng-template>
                            <ng-template #body>
                                    <h3>辖区投诉总数：{{feedBackNum}}</h3>
                                    <div echarts *ngIf="option6.title" [options]="option6"></div>
                                
                            </ng-template>
                        </nz-card>
                    </div>
                    <div nz-col class="gutter-row" [nzSpan]="12">
                        <nz-card style="width:100%;max-height: 380px;">
                            <ng-template #title>
                                本辖区超时年检率及分布情况
                            </ng-template>
                            
                            <ng-template #body>
                                <h3>辖区超期年检总数：{{overCheckNum}}</h3>
                                <div echarts *ngIf="option7.title" [options]="option7"></div>
                                
                            </ng-template>
                        </nz-card>
                    </div>
                </div>
            </div>
        </div>


        <div style="margin:0 1%">
            <div class="gutter-example">
                <div nz-row [nzGutter]="8">
                    
                    <div nz-col class="gutter-row" [nzSpan]="12">
                        <nz-card style="width:100%;max-height: 380px;">
                            <ng-template #title>
                                    本辖区救援演练次数及分布情况
                            </ng-template>
                            
                            <ng-template #body>
                                <h3>辖区救援演练总次数：{{rescueDrillCount}}</h3>
                                <div echarts *ngIf="option2.title" [options]="option2"></div>
                                
                            </ng-template>
                        </nz-card>
                    </div>
                </div>
            </div>
        </div>
    
</div>